<template>
  <a-modal
    title="您的项目是否要技术上会？请选择需要上会的原因。"
    :visible="visible"
    :closable="false"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    width="600px"
  >
    <div style="width: 100%">
      <a-form-model>
        <a-row :gutter="24">
          <a-radio-group v-model="reasonVal" :options="optionsData">
          </a-radio-group>
        </a-row>
      </a-form-model>
    </div>
  </a-modal>
</template>
<script>
import { strNotNull } from '@/utils/common.js'
export default {
  components: {},
  name: 'MeetReasonSelect',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      reasonVal: '',
      optionsArr:[
        '需要组织线下上会。原因：属于A类项目。',
        '需要组织线下上会。原因：属于B类项目，且X绩点≥60分。',
        '需要组织线下上会。原因：属于C类项目，且X绩点≥80分。',
        '需要组织线下上会。原因：属于D类项目，且X绩点≥80分。',
        '需要组织线下上会。原因：属于E类项目，且X绩点≥80分。',
        '线上完成技术会审，不需要组织线下上会。'
      ],
      optionsData:[],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
    }
  },
  mounted() {
    this.optionsArr.forEach(opt=>{
      this.optionsData.push({
        label:opt,
        value:opt
      });
    });
  },
  methods: {
    doSelect() {
      this.visible = true
    },
    handleOk() {
      var flag = true
      if(this.reasonVal==''){
        this.$message.warning('请选择上会原由');
        return;
      }
      if (flag) {
        this.visible = false
        this.$emit('selectMeetReasonConfirm', this.reasonVal)
      }
    },
    handleCancel() {
      this.columns.forEach((col) => {
        col.username = ''
        col.realname = ''
      })
      console.log(this.columns)
      this.visible = false
      this.$emit('selectUserConfirm', null)
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
</style>